<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>QQ客服管理</title>
<style type="text/css">
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
</style>
</head>
<body>
	<div style="display:flex;justify-content:flex-end;"><button  class="save btn btn-primary btn-lg" >新增QQ客服</button></div>
	<span style="font-weight:bold;color:red;">注：页面上会显示前 3 个客服，后面的客服不会显示</span>
	<table id="table-i-qqAccountList" class="table table-striped table-bordered table-hover" style="margin-top: 20px;">
		<thead>
			<tr>
			<th style="display:none;"></th>
			<th>QQ账号</th>
			<th>姓名</th>
			<th>昵称</th>
			<th>创建时间</th>
			<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div>
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="addAndEditModal" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">新增/修改</h4>
					</div>
					<div class="modal-body">
					<input id="input-i-id" hidden="hidden" class="input-auto" />
					<form>
						<p class="p-c-flexwrapper"><span>QQ账号：</span><input id="input-i-number" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>姓名：</span><input id="input-i-name" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>昵称：</span><input id="input-i-note" required class="input-auto form-control" style="" /></p>
					</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="button-i-addNewQQNumber">提交更改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<!-- 模态框（Modal） -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该QQ客服吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>	
	
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   		
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script type="text/javascript">
		$(".save").on("click", function(e) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})
		$("#table-i-qqAccountList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[10, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "findQQCustomerService.do",
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "number", "className": "number-edit-td"},
	                     {"data": "name", "className": "name-edit-td"},
	                     {"data": "note", "className": "note-edit-td"},
	                     {"data": "createTime", "className": "createTime-edit-td"},
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editBankInfo btn-sm'>修改</button> <button class='btn btn-danger btn-c-delBankInfo btn-sm'>删除</button>"},
	                 ]        
	   		 })		
			$("#button-i-addNewZongDaiLi").on("click", function(event) {
				$("#addAndEditModal").attr("data-type", "add")
				$("#addAndEditModal").modal("show")
			})
			$("#table-i-qqAccountList").on("click", ".btn-c-editBankInfo", function(event) {
				$("#addAndEditModal").attr("data-type", "edit")
				var $parentTr = $(event.target).closest("tr")
				$("#addAndEditModal .input-auto").each(function(index, element) {
					$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text())
				})
				$("#addAndEditModal").modal("show")
			})
			$('#addAndEditModal').on('hidden.bs.modal', function () {
				if ($("#addAndEditModal").attr("data-type") == "edit") {
					$("#addAndEditModal form")[0].reset()
				}
			})
			var obj = {
				btnName: "#button-i-addNewQQNumber",
				divName: "#addAndEditModal",
				isRegArray: [
		             {inputValue: function() {
		            	 return $("#input-i-number").val()
		             }, regValue:/[1-9][0-9]{4,11}/, noticeText:"无效的QQ账号"},			             
	            ],
			}
			
			var ajaxObj = {
				"add": "addQQCustomerService.do",	
				"edit": "updateQQCustomerService.do",
			}
			bindDelItemEvent("#table-i-qqAccountList", ".btn-c-delBankInfo", "deleteQQCustomerService.do")
			checkFormMethod(obj, function() {
				var newRequest = {
					type: "post",
					data: {
						name: $("#input-i-name").val(),
						number: $("#input-i-number").val(),
						note: $("#input-i-note").val(),
					},
					success: function(data) {
						var newData = JSON.parse(data)
						showNoticeModal("操作成功！")
						$('#addAndEditModal').modal("hide")
						$("#addAndEditModal form")[0].reset()
						var table = $("#table-i-qqAccountList").DataTable()
						table.ajax.reload()
					},
					error: function(status) {
					}
				}
				var type = $("#addAndEditModal").attr("data-type")
				if (type == "edit") {
					newRequest.data.id = $("#input-i-id").val()
				}
				newRequest.url = ajaxObj[type]
				ajax(newRequest)
			})			
					
	</script>
</body>
</html>